<template>
  <section class="my-side-nav pos-r">
    <el-scrollbar>
      <el-menu class="my-menu" :default-active="$route.path" router background-color="#393F50" text-color="#92A0C5" active-text-color="#fff" :collapse="isCollapse" unique-opened>
        <template v-for="(item, index) in routes">
          <template v-if="!item.hidden">
            <template v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow">
              <el-menu-item :key="index" :index="item.redirect">
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </template>
            <template v-else>
              <el-submenu :key="index" :index="item.path">
                <template slot="title">
                  <i class="icon" :class="item.meta.icon"></i>
                  <span slot="title">{{ item.meta.title }}</span>
                </template>
                <template v-for="(subItem, subIndex) in item.children">
                  <el-menu-item v-if="!subItem.hidden" :key="subIndex" :index="resolvePath(item.path, subItem.path)">
                    <template slot="title">
                      <span slot="title">{{ subItem.meta.title }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
          </template>
        </template>
        <div class="my-side-control flex all-cen" @click="isCollapse = !isCollapse">
          <i class="icon text-20" :class="[isCollapse ? 'icon-zhankai' : 'icon-shouqi']"></i>
          <span class="mar-l-40">收起</span>
        </div>
      </el-menu>
    </el-scrollbar>
  </section>
</template>

<script>
import{ routes }from '../../router';
export default {
  name: 'SideBar',
  data() {
    this.onlyOneChild = null;
    return {
      routes: routes,
      isCollapse: false
    };
  },
  computed: {},
  created() { },
  mounted() {
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false;
        } else {
          return true;
        }
      });
      if (showingChildren.length === 0 || showingChildren.length === 1) {
        return true;
      }
      return false;
    },
    resolvePath(basePath, routePath) {
      return `${basePath}/${routePath}`;
    }
  }
};
</script>

<style>
.my-side-bar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.is-horizontal {
  display: none;
}
</style>
